<!--
 * @Description: 供应链订单详情
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-11-12 13:55:54
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="bigbox">
    <LoadingOverlay
      v-model="loadingSkeleton"
      :text="loadingText"
      :size="60"
      color="#ff6c18"
    />
    <view class="main-container">
      <view class="header">
        <!-- 头部内容保持不变 -->
        <view
          class="header-t txbox"
          v-if="
            moneyResponse.orderThirdParty.orderStatus == 10 && orderStatus != 92
          "
        >
          <van-icon name="close" size="50rpx" style="margin-right: 20rpx" />
          下单失败
        </view>
        <view class="header-t txbox" v-else>
          <u-image
            width="60rpx"
            height="60rpx"
            :src="showImage"
            style="margin-right: 10rpx; color: #fff"
          ></u-image>
          {{ showStatusText }}
        </view>
        <view class="header-b">
          <view
            v-if="
              moneyResponse.orderThirdParty.orderStatus == 10 &&
              orderStatus != 92
            "
            >下单失败，请点击立即退款，金额将会原路返还，用户需重新下单奥~</view
          >
          <view v-else>{{ showText }}</view>
        </view>
      </view>
      <view class="content">
        <view class="content-t">
          <!-- 用户信息和地址 -->
          <view class="smallKuai txbox addressBox">
            <view>
              <u-image
                width="40rpx"
                height="40rpx"
                :src="dztb"
                style="margin-right: 20rpx"
              ></u-image
            ></view>
            <view @click="toAddressList()">
              <view
                ><text style="margin-right: 10rpx">{{ userData.name }}</text
                ><text>{{ userData.phone }}</text>
              </view>
              <view class="hswz">
                {{ orderData.addressStr }}
              </view>
            </view>
          </view>
          <!-- 申请退款显示 -->
        </view>
        <!-- 商品信息 -->
        <view class="content-b">
          <view
            class="smallKuai"
            v-for="item in orderData.goodsList"
            :key="item.id"
          >
            <view class="txbox" @click="handleBuyAgain()">
              <view style="margin-right: 20rpx">
                <van-image
                  width="180rpx"
                  height="180rpx"
                  :src="item.shopProductSku.productSku.image"
                />
              </view>
              <view>
                <view
                  style="width: 470rpx; font-size: 28rpx; font-weight: bold"
                  class="overwz jcwz"
                >
                  {{ item.shopProductSku.productSku.name }}
                </view>
                <view class="hswz txbox2" style="margin: 20rpx 0">
                  <view style="margin-right: 10rpx">{{
                    item.otherCheckStr
                  }}</view>
                  <view>x{{ item.count }}</view>
                </view>
                <view class="txbox2">
                  <view
                    style="font-size: 26rpx"
                    :class="{ oldPrice: item.scoreMoney > 0 }"
                    >原价￥{{
                      moneyUtils.formatPrice(
                        item.shopProductSku.money * item.count
                      )
                    }}</view
                  >
                  <view
                    style="font-size: 26rpx; color: red"
                    v-if="item.scoreMoney > 0"
                    >优惠价￥
                    <text class="jqwz">{{ item.totalMoney }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="goodFooter">
              <view class="refund" v-if="item.refundMoney"
                >已退商品金额:￥{{ item.refundMoney }}
                <text v-if="item.refundScoreMoney > 0">
                  已退{{ enumAll.SHOPMODEL[shopMode] }}￥{{
                    item.refundScoreMoney
                  }}</text
                >
              </view>
              <!-- 占位 -->
              <view v-else></view>
              <view>
                <u-button
                  v-if="!item.isRefund && showRefund"
                  style="width: 140rpx; font-size: 26rpx"
                  @click="toRefund(item)"
                  >退款/售后</u-button
                >
                <u-button
                  v-else-if="item.isRefund"
                  style="width: 140rpx; font-size: 26rpx"
                  @click="toRefund(item)"
                  >售后详情</u-button
                >
              </view>
            </view>
          </view>
          <!-- 下单信息 -->
          <view>
            <view class="smallKuai goodsMes">
              <!-- 海关要求 -->

              <van-collapse
                v-model="activeNames"
                v-if="moneyResponse.eatType == 9"
              >
                <van-collapse-item name="1">
                  <template #title>
                    <div class="txbox">
                      <image
                        style="width: 20px; height: 20px; margin-right: 10rpx"
                        :src="qiu"
                        mode="scaleToFill"
                      />
                      <text>应海关文件要求</text>
                    </div>
                  </template>
                  <view class="haiguanBox">
                    <view class="txbox2">
                      <text>真实姓名：</text>
                      <u-input
                        :disabled="disabled"
                        placeholder="请填写真实姓名"
                        v-model="realName"
                        @blur="blurRealName"
                        type="input"
                      />
                    </view>
                    <view class="error-message" v-show="isRealNameError">
                      真实姓名不能为空
                    </view>
                    <view class="txbox2">
                      <view>身份证号：</view>
                      <u-input
                        :disabled="disabled"
                        @blur="blurCardId"
                        placeholder="请填写身份证号"
                        v-model="idCard"
                        type="number"
                      />
                    </view>
                    <view class="error-message" v-show="isIdCardError">
                      身份证号码格式不正确
                    </view>
                  </view>
                </van-collapse-item>
              </van-collapse>

              <!-- 备注 -->
              <view class="txbox2 remark">
                <view>备注：</view>
                <u-input :disabled="disabled" v-model="remark" type="input" />
              </view>
              <view class="txbox2 tickt" v-if="scoreMoney > 0">
                <view>{{ enumAll.SHOPMODEL[shopMode] }}抵扣:</view>
                <view class="jqwz">-￥{{ scoreMoney }}</view>
              </view>
              <view class="txbox2 tickt" v-if="shopMode == 4 && scoreMoney > 0">
                <view>服务费:</view>
                <view class="jqwz" v-if="moneyResponse.otherMoney"
                  >￥{{ moneyResponse.otherMoney }}</view
                >
                <view class="jqwz" v-else-if="moneyResponse.otherMoney != 0"
                  >计算中...</view
                >
              </view>
              <view class="txbox2 tickt">
                <view>运费:</view>
                <view class="jqwz" v-if="moneyResponse.freight > 0"
                  >￥{{ moneyResponse.freight }}</view
                >
                <view class="jqwz" v-else-if="moneyResponse.freight == 0"
                  >包邮</view
                >
                <view class="jqwz" v-else="moneyResponse.freight != 0"
                  >计算中...</view
                >
              </view>
            </view>
          </view>
          <!-- 详情信息 -->
          <view class="smallKuai" v-if="orderStatus != 0">
            <view class="xhz txbox" v-if="orderStatus != 0">
              <view class="bt">下单时间:</view>
              <view class="nr hswz"
                >{{
                  dateFormat(
                    new Date(moneyResponse.createTime * 1000),
                    'yyyy-MM-dd hh:mm'
                  )
                }}
              </view>
            </view>
            <view class="xhz txbox" @click="handleCopy(moneyResponse.orderNo)">
              <view class="bt">订单编号:</view>
              <view class="nr hswz">{{ moneyResponse.orderNo }} </view>
              <view class="textTag">
                复制<u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <view
              class="xhz txbox"
              @click="goLogistics()"
              v-if="logisticsObj.courierCompany"
            >
              <view class="bt">物流公司:</view>
              <view class="nr hswz">
                <text>{{ logisticsObj.courierCompany }}</text>
                <text class="textTag">
                  查看物流<u-icon name="arrow-right"></u-icon>
                </text>
              </view>
              <view style="margin-left: 10rpx"> </view>
            </view>
          </view>
        </view>
      </view>
      <view class="footer" v-if="orderStatus != 4">
        <!-- 其他显示 -->
        <view class="btns">
          <view class="title">
            <text class="text">实付：</text>
            <text style="color: red">￥</text>
            <text
              class="price"
              v-if="
                moneyUtils.subtract(
                  moneyResponse.totalMoney,
                  moneyResponse.scoreMoney
                )
              "
              >{{
                moneyUtils.subtract(
                  moneyResponse.totalMoney,
                  moneyResponse.scoreMoney
                )
              }}</text
            >
            <text style="color: red" v-else>计算中...</text>
          </view>
          <van-button
            :disabled="loadingSkeleton"
            :loading="payLoading"
            loading-type="spinner"
            style="width: 100%"
            v-if="orderStatus == 0 && dispalyBtn"
            round
            color="#ff6c18"
            type="success"
            @click="debouncedHandleeSubmit"
            >立即下单</van-button
          >
          <van-button
            @click="showPopUp = true"
            style="width: 100%"
            v-if="
              orderStatus == 30 &&
              moneyResponse.orderThirdParty.orderStatus != 10
            "
            round
            color="#ff6c18"
            type="success"
            >确认收货</van-button
          >
          <van-button
            style="width: 100%"
            v-if="orderStatus == 60"
            @click="handleBuyAgain()"
            round
            color="#ff6c18"
            type="success"
            >再次购买</van-button
          >
          <van-button
            :loading="payLoading"
            loading-type="spinner"
            style="width: 100%"
            v-if="
              moneyResponse.orderThirdParty.orderStatus == 10 &&
              orderStatus != 92
            "
            round
            color="#ff6c18"
            type="success"
            @click="handleRefund"
            >立即退款</van-button
          >
          <!-- <u-button
          @click="showPopUp = true"
          type="primary"
          style="width: 100%"
          v-if="
            (  orderStatus == 30) &&
            moneyResponse.orderThirdParty.orderStatus != 10
          "
          >确认收货</u-button
        > -->

          <!-- <u-button
          @click="handleRefund"
          type="primary"
          style="width: 100%"
          v-if="
            moneyResponse.orderThirdParty.orderStatus == 10 && orderStatus != 92
          "
          >立即退款</u-button
        > -->
          <!-- <u-button
          type="primary"
          style="width: 100%"
          v-if="orderStatus == 60"
          @click="handleBuyAgain()"
          >再次购买</u-button
        > -->
        </view>
      </view>
      <!-- 确认收货弹框 -->
      <u-modal
        show-confirm-button
        show-cancel-button
        v-model="showPopUp"
        @confirm="handleComplete"
        @cancel="showPopUp = false"
        title="
      温馨提示"
        :content-style="{ color: 'red' }"
        content="确认收货之后系统将不再做任何售后操作,请确保您的商品已经完成。"
      ></u-modal>
    </view>
    <!-- 申请售后弹框 -->
    <!-- <ApplyShAlert ref="applyShRef"></ApplyShAlert> -->
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, computed, nextTick, h } from 'vue'
import { hasOwn, onLoad, onReady } from '@dcloudio/uni-app'
//api
import { baseApi, userApi, enumAll, orderApi } from '@/api'
// stroe
import { storeToRefs } from 'pinia'
import { userGylCarStore, useUserStore } from '@/store'
//组件
import LoadingOverlay from '@/components/hy-loadingPage/index.vue'
//工具
import { moneyUtils } from '@/utils/money'
import { dateFormat } from '@/utils/index'
import { browserVersion } from '@/utils/common'
import debounce from 'lodash/debounce'
// 图片
import tjtb2 from '../../static/tjtb2.png'
import fktb2 from '../../static/fktb2.png'
import fhtb2 from '../../static/fhtb2.png'
import shtb2 from '../../static/shtb2.png'
import tktb2 from '../../static/tktb2.png'
import jywc2 from '../../static/jywc2.png'
import dztb from '../../static/dztb.png'
import qiu from '../../static/qiu.png'
import quxiao from '../../static/quxiao.png'
// import ApplyShAlert from '@/packageG/components/applyShAlert.vue'

// 初始化数据
const userStore = useUserStore()
const gylStore = userGylCarStore()
const loadingSkeleton = ref(false)
const loadingText = ref('计价中...')
const isApp = ref(false) //是否app端
const showPopUp = ref(false) //确认收货弹窗
const shopMode = ref(uni.getStorageSync('shopMode'))
const { accessToken, useShareCode } = storeToRefs(userStore)
//收货地址用户信息
const userData = ref({ name: '暂无', phone: '暂无' })
// 商品列表
const orderData = reactive({
  goodsList: [] as any,
  addressStr: '暂无收货地址，请先添加后下单',
  addressId: 0
})
const dispalyBtn = ref(false) //是否展示立即支付
const payLoading = ref(false) //点击支付的加载
const disabled = ref(false)
const scoreMoney = ref(0)

//money响应数据
const moneyResponse = ref<any>({ orderThirdParty: { orderStatus: '' } })
// 海关用户信息
const realName = ref('') // 真实姓名
const idCard = ref('') // 身份证号
const remark = ref('')
const isRealNameError = ref(false) // 真实姓名校验错误
const isIdCardError = ref(false) // 身份证号校验错误

const orderId = ref()
const orderStatus = ref(10)
const orderTextStatus = ref(0)
// 物流
const logisticsList = ref<any>([])
const logisticsObj = ref<any>({
  courierNumber: '',
  courierCompany: ''
})

const activeIcon = ref('success')

const tkzt = ref(10)
const activeIndex = ref(0)
const activeNames = ref(['1'])

// 退款展示icon
const showImage = computed(() => {
  switch (orderStatus.value) {
    case 0:
      return fktb2
    case 10:
      return fktb2
    case 20:
      return fhtb2
    case 30:
      return shtb2
    case 60:
      return jywc2
    case 70:
      return quxiao
    case 91:
      return quxiao
    case 92:
      return tktb2
  }
})
// 退款展示文字
const showStatusText = computed(() => {
  switch (orderStatus.value) {
    case 0:
      return `待支付`
    case 10:
      return `未支付`
    case 20:
      return `待发货`
    case 30:
      return `待收货`
    case 60:
      return '交易完成'
    case 70:
      return `用户交易取消`
    case 91:
      return `交易取消`
    case 92:
      return `退款完成`
  }
})
// 状态展示文字
const showText = computed(() => {
  switch (orderStatus.value) {
    case 0:
      return '等待用户支付，15分钟内未支付订单将取消。'
    case 10:
      return '订单未支付，请返回商品界面重新下单。'
    case 20:
      return `订单已支付，等待厂家发货。`
    case 30:
      return `厂家已发货，系统将在发货10天之后自动收货，请注意查收。`
    case 92:
      return `系统已将退款资金交给客服处理,退款会原路退回至您的支付账户,余额会在20分钟内到账,银行卡会在1-3个工作日内到账。`
    case 60:
      return `该订单已经完成，系统不再进行额外售后操作。`
    case 70:
      return `用户取消该订单。`
    case 91:
      return `用户超时未支付，取消该订单。`
  }
})

// 退款展示文字
const tkText = computed(() => {
  switch (tkzt.value) {
    case 10:
      return '您已提交退款申请，请等待客服处理'
    case 20:
      return '审核不通过，商品未退回'
    case 30:
      return '审核通过后会在1个工作日内将退款'
    case 4:
      return '退款已到原支付方式'
  }
})
const handleCopy = (text: any) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({ title: '复制成功' })
    },
    fail: () => {
      uni.showToast({ title: '复制失败', icon: 'none' })
    }
  })
}

// 点击申请售后
const showRefund = computed(() => {
  return (
    moneyResponse.value.orderThirdParty.orderStatus != 7 &&
    moneyResponse.value.orderThirdParty.orderStatus != 10 &&
    (orderStatus.value == 20 || orderStatus.value == 30)
  )
})

// #region ************************ 获取订单详情 **************************/
// 订单走支付的时候调用的money
const getOrderMoney = async () => {
  loadingSkeleton.value = true
  if (orderData.addressId == 0) {
    uni.showToast({ title: '请选择收货地址', icon: 'none' })
    return
  }
  try {
    const { data, code } = await orderApi.orderMoney({
      orderProductSkus: orderData.goodsList,
      scoreMoney: scoreMoney.value,
      addressId: orderData.addressId,
      integralsRuleId: 8,
      detail: true,

      status: 0
    })
    orderData.goodsList = data.orderProductSkus
    moneyResponse.value = { ...data }
    orderStatus.value = data.status
    addressStrFn(data.address)
    loadingSkeleton.value = false
  } catch (error: any) {
    loadingText.value = error.msg
  }
}

// 已有订单id的详情
//从订单进入的
const byOrderId = async () => {
  loadingSkeleton.value = true
  loadingText.value = '加载中...'
  try {
    const { data } = await orderApi.orderInfo({
      detail: true,
      id: orderId.value
    })
    // 收货地址详情
    const str = data.address
    userData.value.name = str.name
    userData.value.phone = str.phone
    orderData.addressStr =
      str.provinceName +
      str.cityName +
      str.districtName +
      str.street +
      str.other
    // 商品详情
    orderData.goodsList = data.orderProductSkus.map((item: any) => {
      return {
        ...item,
        actualDeductible: item.scoreMoney
      }
    })
    shopMode.value = data.shopMode
    uni.setStorageSync('shopMode', data.shopMode)
    orderStatus.value = data.status

    moneyResponse.value = data
    scoreMoney.value = data.scoreMoney
    realName.value = data.identityName
    idCard.value = data.identityCard
    disabled.value = true
    remark.value = data.remark == '' ? ' ' : data.remark

    // 物流信息
    if (data.orderThirdParty.logistics) {
      //待收货
      const logistics = JSON.parse(data.orderThirdParty.logistics)
      logisticsList.value = logistics
      gylStore.setLogisticsList(logisticsList.value)
      logisticsObj.value = {
        courierCompany: logisticsList.value[0].company,
        courierNumber: logisticsList.value[0].number
      }
    }
    loadingSkeleton.value = false
  } catch (error: any) {
    loadingText.value = error.msg
  }
}

// 查看物流详情
const goLogistics = () => {
  uni.navigateTo({
    url: `/packageG/pages/supplyChainOrder/logisticsDetail?orderId=${orderId.value}`
  })
}
// #endregion
// #region ************************ 提交订单 **************************/
const blurRealName = () => {
  if (!realName.value) {
    isRealNameError.value = true
  } else {
    isRealNameError.value = false
  }
}
const blurCardId = () => {
  if (!idCard.value) {
    isIdCardError.value = true
  } else {
    isIdCardError.value = false
  }
}

// 身份证号码校验方法
const isValidIdCard = (idCard: string) => {
  // 简单的身份证号码校验规则：长度为18位，且符合常见格式
  const regex =
    /^[1-9]\d{5}(18|19|20)?\d{2}((0[1-9])|(10|11|12))(([0|1|2][0-9])|10|20|30|31)\d{3}(\d|[Xx])$/
  return regex.test(idCard)
}

// 提交方法
const handleSubmit = () => {
  // 重置校验状态
  isRealNameError.value = false
  isIdCardError.value = false

  // 校验真实姓名
  if (moneyResponse.value.eatType == 9 && !realName.value) {
    isRealNameError.value = true
    return
  }

  // 校验身份证号
  if (moneyResponse.value.eatType == 9 && !isValidIdCard(idCard.value)) {
    isIdCardError.value = true
    return
  }

  // 如果校验通过，执行提交逻辑
  moneyResponse.value.identityName = realName.value
  moneyResponse.value.identityCard = idCard.value
  creatOrder()
}

// 防抖
const debouncedHandleeSubmit = debounce(handleSubmit, 500)

// 创建订单
const creatOrder = async () => {
  payLoading.value = true
  const { data } = await orderApi.orderAdd({
    ...moneyResponse.value,
    remark: remark.value
  })


  if (data) {
    if (isApp.value) {
      const u = browserVersion()
      if (u.iPhone) {
        // @ts-ignore
        window.JSBridge.invoke('goPay', {
          orderId: data.id,
          money: data.payMoney
        })
        return
      } else if (u.isAndroid) {
        // @ts-ignore
        if (window?.Android) {
          // @ts-ignore
          window?.Android?.goPay(data.id, data.payMoney)
        }
        return
      }
    } else {
      location.href = `https://api.mylkjgs.com/?token=${accessToken.value}&orderId=${data.id}`
    }
    payLoading.value = false
  }
}

// #endregion

//#region ************************* 地址**************************/

//查询用户默认地址
const getDefaultAddress = async () => {
  const { data, code } = await userApi.getAddressList({
    type: 5,
    is_default_address: 1,
    detail: true
  })
  if (code == 200) {
    // 查看有误默认地址
    if (data.records.length > 0) {
      const isDefaultAddress = data.records.some((item: any) => {
        return item.defaultAddress
      })
      if (isDefaultAddress) {
        const strList = data.records.filter((item: any) => {
          return item.defaultAddress
        })
        addressStrFn(strList[0].address)
      } else {
        orderData.addressStr = '还未设置默认地址，请设置!'
      }
    } else {
      orderData.addressStr = '暂无收货地址，请先添加后下单'
    }
  } else {
    orderData.addressStr = '暂无收货地址，请先添加后下单'
    uni.showToast({
      title: '请添加默认地址',
      icon: 'none'
    })
  }
}

// 地址str转换
const addressStrFn = (strObj: any) => {
  userData.value.name = strObj.name
  userData.value.phone = strObj.phone
  orderData.addressId = strObj.id
  const str = strObj
  orderData.addressStr =
    str.provinceName + str.cityName + str.districtName + str.street + str.other
}

// 添加地址
const toAddressList = () => {
  console.log('toAddressList:>>', orderStatus.value)

  if (orderStatus.value != 0) {
    return
  }
  uni.navigateTo({
    url: '/packageB/pages/addressList/index?type=setAddress&isGYL=5',
    success: () => {
      uni.$once('/pages/productCheckout/index', (data: { address: {} }) => {
        setAddress(data)
      })
    }
  })
}

function setAddress(data: { address: {} }) {
  const str: any = data.address
  orderData.addressStr =
    str.provinceName + str.cityName + str.districtName + str.street + str.other
  orderData.addressId = data.address.id

  getOrderMoney()
}

//#endregion

// #region ************************* 收货/退款/再次购买/取消申请售后 **************************/

//收货
const handleComplete = async () => {
  showPopUp.value = false
  const { code } = await orderApi.orderUpdate({
    id: orderId.value,
    status: 60
  })
  if (code == 200) {
    uni.showToast({
      title: '收货成功',
      icon: 'success'
    })
    byOrderId()
  } else {
    uni.showToast({
      title: '收货失败',
      icon: 'error'
    })
  }
}
// 立即退款
const handleRefund = async () => {
  payLoading.value = true
  const { code } = await orderApi.orderUpdate({
    id: orderId.value,
    status: 92
  })
  if (code == 200) {
    uni.showToast({
      title: '退款成功',
      icon: 'success'
    })

    //刷新
    byOrderId()
  } else {
    uni.showToast({
      icon: 'error',
      title: '退款失败,请联系客服' + code
    })
  }
  payLoading.value = false
}
// 售后
const getRefundInfo = async (item: any) => {
  const { data, code } = await orderApi.refundInfo({
    orderProductSkuId: item.id,
    detail: true,
    noPaging: true
  })
  if (code == 200) {
    if (data) {
      uni.navigateTo({
        url: `/packageG/pages/applyAfterService/applyInfo?orderProductSkuId=${item.id} `
      })
    } else {
      uni.navigateTo({
        url: `/packageG/pages/applyAfterService/index?orderId=${item.orderId}&orderProductSkuId=${item.id}&shopProductSkuId=${item.shopProductSkuId}`
      })
    }
  } else {
    return uni.showToast({
      icon: 'error',
      title: '获取售后详情失败' + code
    })
  }
}
//退款
const toRefund = (item: any) => {
  // 判断是否已经有售后
  getRefundInfo(item)
}

// 再次购买
const handleBuyAgain = async () => {
  const productId = moneyResponse.value.orderProductSkus[0].productId
  if (productId) {
    if (isApp.value) {
      uni.navigateTo({
        url: `/packageG/pages/goods/goodsDetail?id=${productId}&mode=${shopMode.value}&from=app`
      })
    } else {
      uni.navigateTo({
        url: `/packageG/pages/goods/goodsDetail?id=${productId}&mode=${shopMode.value}`
      })
    }
  } else {
    uni.navigateTo({
      url: `packageG/pages/index/index?mode=${shopMode.value}`
    })
  }
}

//取消申请售后
const handleCancel = async () => {
  const { code } = await orderApi.refundCancelRefund({
    orderProductSkuId: orderData.goodsList[0].id
  })
  if (code == 200) {
    uni.showToast({
      title: '取消成功',
      icon: 'success'
    })
    //刷新
    byOrderId()
  } else {
    uni.showToast({
      icon: 'error',
      title: '取消失败,请联系客服' + code
    })
  }
}

// #engregion

onLoad(async (option: any) => {
  console.log('支付的opyion', option)

  if (option?.from?.toLowerCase?.() === 'app') {
    isApp.value = true
  }
  if (option?.orderType == 1) {
    dispalyBtn.value = true
  } else {
    dispalyBtn.value = false
  }
  if (option?.orderStatus == 10) {
    scoreMoney.value = gylStore.allHighestScoreMoney
    orderData.goodsList = gylStore.chooseList
    orderStatus.value = Number(option.orderStatus)
    orderTextStatus.value = 0
    orderData.addressId = gylStore.addressId
    if (orderData.addressId != 0) {
      getOrderMoney()
    } else {
      await getDefaultAddress()
      getOrderMoney()
    }
  }
  if (option?.orderId) {
    orderId.value = option?.orderId

    if (option?.from && option.from.toLowerCase() === 'app') {
      isApp.value = true
      // #ifdef H5
      // @ts-ignore
      window.JSBridge.registerEvent('HYUserEvent', async () => {
        byOrderId()
      })
      // #endif
    } else {
      byOrderId()
    }
  }
})
</script>

<style scoped lang="less">
.bigbox {
  font-size: 24rpx;
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url('../../static/ddxqbj.png');
  background-repeat: no-repeat;
  background-size: 100% 500rpx;

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .header {
    color: #fff;
    width: 750rpx;
    min-height: 200rpx; // 设置最小高度

    background-position: center center;

    flex-shrink: 0; // 防止收缩

    .header-t {
      padding: 20rpx;
      padding-top: 60rpx;
      font-size: 36rpx;
    }

    .header-b {
      padding: 0 20rpx 20rpx 20rpx; // 增加底部 padding
      .headerText {
        display: flex;
        font-size: 28rpx;
      }
    }
  }

  .content {
    flex: 1;
    margin: 20rpx; // 使用 margin 替代绝对定位

    background: transparent;

    .addressBox {
      z-index: 50;
    }
    .goodsMes {
      font-size: 28rpx;
      .remark {
        margin: 20rpx 0;
      }
    }
    .smallKuai {
      width: 710rpx;
      border-radius: 10rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      padding: 25rpx;
      .tickt {
        font-size: 28rpx;
        margin-bottom: 20rpx;
      }
      .bt {
        font-size: 28rpx;
        margin-right: 10rpx;
      }
      .xhz {
        height: 60rpx;
        .nr {
          font-size: 28rpx;
        }
      }
      .btns {
        width: 100%;
        margin-top: 20rpx;
        padding-left: 500rpx;
        display: flex;
        align-items: center;
        justify-self: end;
      }
    }
    .content-b {
      // position: absolute;
      margin-bottom: 180rpx;
      .goodFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .refund {
          color: #fe7342;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 140rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    display: flex;
    align-items: center;
    z-index: 100; /* 确保 footer 在最上层 */
    .btns {
      width: 100%;
      // margin-top: 20rpx;
      padding: 0 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .payBtn {
      width: 100%;
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .total {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin-right: 240rpx;
      }
    }
    .title {
      width: 100%;
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      .price {
        color: red;
        font-size: 40rpx;
        font-weight: 700;
      }
    }
  }
}
.hswz {
  margin: 10rpx 0;
  color: #999;
}
.wl {
  margin: 0rpx 10rpx;
}
.jqwz {
  color: red;
  font-size: 32rpx;
}
.textTag {
  margin-left: 20rpx;
  font-size: 26rpx;
  color: #2979ff;
}

.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
.txbox {
  display: flex;
  align-items: center;
}
.txbox2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.haiguanBox {
  padding: 10rpx;
  // background: #f7f7f7;
}

:deep(.van-image__img) {
  border-radius: 20rpx;
}
:deep(.u-cell) {
  padding: 0;
}
.error-message {
  color: red;
  font-size: 26rpx;
}
:deep(.van-cell) {
  padding-left: 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); // 半透明黑色背景
  z-index: 9999; // 确保在最顶层
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 40rpx;
  border-radius: 20rpx;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 30rpx;
  color: #fff;
}
.oldPrice {
  text-decoration: line-through;
}
</style>
